<template>
  <div class="personal">
    <el-card class="box-card">
      <div class="header" slot="header">个人中心</div>
      <div class="personal-text">
        <div>ID：{{ emp.id }}</div>
        <el-divider></el-divider>
        <div>姓名：{{ emp.name }}</div>
        <el-divider></el-divider>
        <div>账号：{{ emp.account }}</div>
        <el-divider></el-divider>
        <div>密码：{{ emp.password }}</div>
        <el-divider></el-divider>
        <div>电话：{{ emp.phone }}</div>
        <el-divider></el-divider>
        <div>性别：{{ emp.sex }}</div>
        <el-divider></el-divider>
        <div>角色：{{ emp.role | roleFilter }}</div>
        <el-divider></el-divider>
        <div>状态：{{ emp.status | statusFilter }}</div>
        <el-divider></el-divider>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getPersonalData } from "@/api/user";
export default {
  data() {
    return {
      emp: {
        id: "",
        name: "",
        account: "",
        password: "",
        phone: "",
        sex: "",
        role: "",
        status: "",
      },
    };
  },
  created() {
    // 获取个人数据
    let account = JSON.parse(localStorage.getItem("account"));
    getPersonalData({ account: account }).then((resp) => {
      let respData = resp.data;
      if (respData.code == 20000) {
        this.emp = respData.data;
      }
    });
  },

  filters: {
    roleFilter(data) {
      if (data === "admin") {
        return "管理员";
      } else if (data === "employee") {
        return "普通员工";
      } else if (data === "sales") {
        return "收银员";
      }
    },
    statusFilter(data) {
      if (data === "active") {
        return "可用";
      } else if (data === "inactive") {
        return "被禁用";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.personal {
  width: 100%;
  height: 100%;
}
</style>
